<template>
  <section>
    <canvas ref="cav" class="border"></canvas>
    <svg id="svg1"></svg>
  </section>
</template>

<script>
import {getRandomColor} from "@/utils/tools";

/**
 *@Description:线性渐变和径向渐变
 *@author ZY
 *@date 2022/11/20 21:38
 */
export default {
  name: "canvas-image",
  data() {
    return {}
  },
  mounted() {
    this.main()
  },
  methods: {
    main() {
      let that = this
      let cavCanvas = this.$refs.cav
      cavCanvas.width = 600
      cavCanvas.height = 300
      let cavCtx = cavCanvas.getContext('2d')
      this.drawImage(cavCtx)

    },

// 画图像
    drawImage(ctx) {
      let that = this
      var svg1 = document.getElementById("svg1");
      var matrix = svg1.createSVGMatrix();
      let img = new Image()
      img.src = 'https://images.pexels.com/photos/10026491/pexels-photo-10026491.png?auto=compress&cs=tinysrgb&w=600&lazy=load'
      img.onload = function () {
        // ctx.drawImage(img, 0, 0,that.clientWidth, 400,0, 0,that.clientWidth, 200);

        let pattern = ctx.createPattern(img, 'repeat');
        pattern.setTransform(matrix.rotate(-45).scale(1.5));
        ctx.fillStyle = pattern
        ctx.fillRect(0, 0, 400, 430);

        ctx.setLineDash([8, 4]);
        ctx.lineDashOffset = 23.0;
        ctx.strokeRect(2, 2, 236, 116);

      }


    },
  }
}
</script>

<style lang="scss" scoped>
.border {
  border: 1px solid #dbdbdb;
  border-radius: 5px;
  overflow: hidden;
}
</style>
